<template>
  <div class="top" style="padding-top: -20px">
    <span style="position: absolute;padding-top:0px;right: 43%;font-size: 20px;font-weight: bold">悠哉茶桌 - 用户管理</span>
    <span style="float:right"> <el-button type="primary" plain @click="jump">返回</el-button></span>
  </div>

  <el-card class="box-card" style="margin:auto; width: 900px;height: auto">
    <el-table
        :data="tableData"
        style="width: 100%"
        size="default">
      <el-table-column
          label="用户"
          prop="persion">
      </el-table-column>
      <el-table-column
          label="最近发言时间"
          prop="time">
      </el-table-column>
      <el-table-column
          label="当前状态"
          prop="state"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          label="操作"
          prop="upgrate">
        <template #default="scope">
          <!--          <i class="el-icon-delete" @click="deletePost(scope.row)"></i>-->
          <el-button size="default" type="danger" @click="updateUser(scope.row)">禁言</el-button>
          <el-button size="default" type="danger" @click="updateUser(scope.row)">解除禁言</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        :current-page="currentPage"
        @current-change="handleCurrentChange">
    </el-pagination>
  </el-card>

  <span style="float:right">
    <el-button size="large" style="float: left; padding: 2px" type="text" @click="option = true">添加用户</el-button>
  </span>
  <el-dialog title="添加用户" v-model="option" width="40%">
    <el-form label-width="120px" size="small" :model="form" :rules="rules" ref="pass"
             style="padding: 20px 80px 0 20px">
      <el-form-item label="用户" prop="nickName">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="初始密码" prop="nickName">
        <el-input v-model="password"></el-input>
      </el-form-item>
      <el-form-item label="当前状态" prop="sign">
        <el-input v-model="state"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "ManageUser",
  data () {
    return {
      option: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      total: 5,
      currentPage: 1,
      size: 4,
      rules:{
        name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, message: '长度不少于3位', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入初始密码', trigger: 'blur'},
          {min: 3, message: '长度不少于5位', trigger: 'blur'}
        ],
        state: [
          {required: true, message: '请输入该用户当前状态', trigger: 'blur'},
          {min: 2, trigger: 'blur'}
        ]
      },
      tableData: [
        {
          persion: '咕嘟咕嘟',
          time: '2023-06-12',
          state: '禁言',

        }, {
          persion: '傻兜',
          time: '2023-06-11',
          state: '未禁言',

        }, {
          persion: '嗝嗝',
          time: '2023-06-10',
          state: '未禁言',

        },
        {
          persion: '幻仙女',
          time: '2023-06-19',
          state: '禁言',

        },
        {
          persion: '锅盖',
          time: '2023-06-19',
          state: '禁言',
        },
      ]
    }
  },
  methods: {
    jump() {
      this.$router.push('/userInfo')
    },
    updateUser(user) {
      this.rq.post("/user/updata", user).then(res=>{
        if (res.code === '200') {
          this.$message.success("更改成功")
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error("未知错误")
      })
    },
  }
}
</script>

<style scoped>

</style>